<template>
    <view class="pages">
        <date-filter-view v-if="formPiker" :dateTypeList="filterList" @dateEvent="dateEvent"></date-filter-view>
        <view v-if="weightData.length > 0 && weightData" class="charts-box">
            <!-- <view class="charts"> -->
            <qiun-data-charts
                type="line"
                :opts="opts"
                :chartData="Line"
                :ontouch="true"
                :echartsH5="true"
                :canvas2d="true"
                canvasId="weightChangeChart"
                :echartsApp="true"
                background="rgba(255,255,255,1)"
            />
        </view>
        <!-- </view> -->
        <image
            v-if="(weightData.length <= 0 || !weightData) && isload"
            class="data_null"
            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/tizhongbianhuannull.png"
        ></image>

        <View class="foterName" @click="onPush" v-if="weightList > 0">
            <View class="foterCom">
                <View class="dian"></View>
                <View class="fotertxt"> 你有{{ weightList }}条体脂称测量数据待领取 </View>
                <image style="width: 16px; height: 16px" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wigthRIght.png"></image>
            </View>
        </View>
    </view>
</template>
""

<script>
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            filterList: [
                {
                    type: "week",
                    typeTitle: "周体重变化",
                },
                {
                    type: "month",
                    typeTitle: "月体重变化",
                },
                {
                    type: "year",
                    typeTitle: "年体重变化",
                },
            ],
            formPiker: true,
            form: {
                beginDate: "",
                endDate: "",
            },
            weightData: [],
            isload: false,
            Line: {
                categories: [],
                series: [],
            },
            weightList: 0,
        };
    },
    onUnload() {
        this.formPiker = false;
    },
    onLoad() {
        this.weightListNum();
        // this.dateEvent(1);
        // this.form.beginDate = this.getBeginDate()
        // this.form.endDate = this.getEndDate()
        // this.form.rankType = 1
        // this.reqeustMain()
    },

    methods: {
        async weightListNum() {
            const { data } = await this.request.httpTokenRequest(`/mp-api/wx/deviceRecord/count`, "GET");
            if (data > 0) {
                this.weightList = data;
            } else {
                this.weightList = 0;
            }
        },

        onPush() {
            uni.navigateTo({
                url: "/packageStaff/pages/weightList/index",
            });
        },
        dateEvent(e) {
            const form = this.form;
            this.Line = {
                categories: [],
                series: [],
            };
            if (e.type == "week") {
                form.beginDate = e.beginDate;
                form.endDate = e.endDate || e.beginDate;
                form.rankType = 1;
            } else if (e.type == "month") {
                form.beginDate = e.beginDate + "-01";
                form.endDate = e.endDate + "-31";
                form.rankType = 2;
            } else {
                form.beginDate = e.beginDate + "-01-01";
                form.endDate = e.endDate + "-12-31";
                form.rankType = 3;
            }
            this.form = {
                ...form,
            };
            this.reqeustMain();
        },
        getEndDate() {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month > 9 ? month : "0" + month;
            day = day > 9 ? day : "0" + day;
            return `${year}-${month}-${day}`;
        },
        getBeginDate() {
            let eDate = new Date(this.getEndDate());
            let timestamp = eDate.getTime() - 7 * 24 * 3600 * 1000;
            let date = new Date(timestamp);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month > 9 ? month : "0" + month;
            day = day > 9 ? day : "0" + day;
            return `${year}-${month}-${day}`;
        },
        reqeustMain() {
            this.request.httpTokenJsonRequest("/mp-api/wx/weight/data/list", this.form, "POST", false).then((res) => {
                if (res.code == 0 && res.data.dateList) {
                    let weightDay = {
                        data: [],
                    };

                    this.weightMainData = res.data;

                    /** 日期数组 */
                    let dateList = res.data.dateList || [];
                    /** 减重数组 */
                    let weightList = res.data.weightList || [];


                    this.weightData = dateList;
                    this.weightData.forEach((item) => {
                        if (item) {
                            if (this.form.rankType === 3) {
                                this.Line.categories.push(item.substring(5, 7));
                            } else {
                                this.Line.categories.push(this.request.formatDate("m.d", item));
                            }
                            weightDay.name = "体重";
                        }
                    });

                    weightDay.data = weightList.map((item) => item || null);
                    weightDay.connectNulls = true;




                    this.Line.series.push(weightDay);
                } else {
                    this.weightData = [];
                }
                this.isload = true;
            });
        },
    },
    computed: {
        ...mapState(["isLogin", "userInfo", "connectDeviceId"]),
        rankType() {
            return this.form.rankType;
        },
        weekStatistics() {
            return this.rankType === 1;
        },
        monthStatistics() {
            return this.rankType === 2;
        },
        yearStatistics() {
            return this.rankType === 3;
        },
        opts() {
            return {
                update: true,
                fontColor: "#999",
                dataLabel: false,
                dataPointShapeType: "hollow",
                touchMoveLimit: 24,
                color: ["#46C09E"],
                padding: [20, 10, 15, 10],
                legend: {
                    show: false,
                },
                enableScroll: true,
                yAxis: {
                    data: [
                        {
                            axisLine: false,
                            min: 0,
                        },
                    ],
                },
                xAxis: {
                    disableGrid: true,
                    format: "xAxisDemo1",
                    scrollShow: true,
                    itemCount: 5
                },
                extra: {
                    line: {
                        type: "straight",
                        width: 2,
                    },
                    tooltip: {
                        showArrow: false,
                        bgColor: "#F2F8F7",
                        fontColor: "#333",
                        borderOpacity: 1,
                        borderRadius: 4,
                    },
                },
                series: {
                    connectNulls: true,
                },
            };
        },
    },
};
</script>

<style scoped>
.data_null {
    display: block;
    width: 100%;
    height: 576rpx;
    border-radius: 24rpx;
}

.charts-box {
    width: 100%;
    height: 576rpx;
    overflow: auto;
    background: #fff;
}

.charts {
    width: 100%;
}
.foterName {
    margin-top: 10px;

    padding-bottom: 20px;
}
.foterCom {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.dian {
    width: 8px;
    height: 8px;
    background: #fb444a;
    border-radius: 50%;
    margin-right: 5px;
}
.fotertxt {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #234941;
}
</style>
